<template>
  <div class="teader">
    <van-nav-bar title="黑马程序员.vant" />
    <van-swipe :autoplay="2000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img class="image" v-lazy="image.img" />
      </van-swipe-item>
    </van-swipe>
    <van-grid :border="false" column-num="3">
      <van-grid-item @click="Jump">
        <img src="../assets/image/menu1.png" alt="">
        <p>新闻资讯</p>
      </van-grid-item>
      <van-grid-item @click="Jump1">
        <img src="../assets/image/menu2.png" alt="">
        <p>图片分享</p>
      </van-grid-item>
      <van-grid-item @click="Jump2">
        <img src="../assets/image/menu3.png" alt="">
        <p>商品购买</p>
      </van-grid-item>
      <van-grid-item>
        <img src="../assets/image/menu4.png" alt="">
        <p>留言反馈</p>
      </van-grid-item>
      <van-grid-item>
        <img src="../assets/image/menu5.png" alt="">
        <p>视频专区</p>
      </van-grid-item>
      <van-grid-item>
        <img src="../assets/image/menu6.png" alt="">
        <p>联系我们</p>
      </van-grid-item>
    </van-grid>
    <van-tabbar v-model="active">
  <van-tabbar-item icon="wap-home-o">首页</van-tabbar-item>
  <van-tabbar-item icon="manager-o" dot>会员</van-tabbar-item>
  <van-tabbar-item icon="shopping-cart-o" badge="5">购物车</van-tabbar-item>
  <van-tabbar-item icon="search" badge="20">搜索</van-tabbar-item>
</van-tabbar>
  </div>
</template>
<script>
export default {
  props: [],
  data () {
    return {
      active: 0,
      images: []
    }
  },
  mounted () {
    this.getMenuList()
  },
  methods: {
    // 获取轮播图片
    async getMenuList () {
      const { data: res } = await this.$http.get('/api/getlunbo')
      this.images = res.message
      // console.log(this.images)
    },
    Jump () {
      this.$router.push({ path: '/NewsList' })
    },
    Jump1 () {
      this.$router.push({ path: '/Instagram' })
    },
    Jump2 () {
      this.$router.push({ path: '/goodsList' })
    }
  }
}
</script>
<style lang="less" scoped>
// .van-swipe-item img {
// width: 100%;
// }
.teader {
  margin: 45px 0;
}
.van-nav-bar {
  width: 100%;
  height: 40px;
  background: #1989fa;
}
/deep/.van-ellipsis {
  color: #fff;
  font-size: 14px;
}
.van-swipe img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 240px;
  padding: 30px 60px;
  background-color: #fff;
  pointer-events: none;
}
.van-grid-item{
height: 136px;
}
.van-grid-item img {
  width: 60px;
  height: 60px;
  font-size: 14px;
}
.van-swipe-item{
  height: 200px;
}
/deep/.van-swipe-item img {
  padding: 0;
}
</style>
